import React, { Component } from 'react';
import { Text, View, StyleSheet} from 'react-native';
import { Marquee } from 'iftide';

export default class User1 extends Component {

  textpress2(index){
    console.log(index);
  }

  
  render() {
    let componentArray1=[
      <View key="1" style={styles.viewCon}><Text style={{color:"blue"}}>测试标题测试标题1</Text></View>,
      <View key="2" style={styles.viewCon}><Text style={{color:"blue"}}>测试标题测试标题2</Text></View>,
      <View key="3" style={styles.viewCon}><Text style={{color:"blue"}}>测试标题测试标题3</Text></View>,
      <View key="4" style={styles.viewCon}><Text style={{color:"blue"}}>测试标题测试标题4</Text></View>,
      <View key="5" style={styles.viewCon}><Text style={{color:"blue"}}>测试标题测试标题5</Text></View>,
      <View key="6" style={styles.viewCon}><Text style={{color:"blue"}}>测试标题测试标题6</Text></View>,
    ];
    let componentArray2=[
      <View key="1" style={styles.viewCon2}><Text style={styles.headText}>固收</Text><Text style={styles.info}>测试标题测试标题1</Text></View>,
      <View key="2" style={styles.viewCon2}><Text style={styles.headText}>固收</Text><Text style={styles.info}>测试标题测试标题2</Text></View>,
      <View key="3" style={styles.viewCon2}><Text style={styles.headText}>固收</Text><Text style={styles.info}>测试标题测试标题3</Text></View>,
      <View key="4" style={styles.viewCon2}><Text style={styles.headText}>固收</Text><Text style={styles.info}>测试标题测试标题4</Text></View>,
      <View key="5" style={styles.viewCon2}><Text style={styles.headText}>固收</Text><Text style={styles.info}>测试标题测试标题5</Text></View>,
      <View key="6" style={styles.viewCon2}><Text style={styles.headText}>固收</Text><Text style={styles.info}>测试标题测试标题6</Text></View>,
    ];
    return (
        <View>
       
          <Text>1——正常上下滚动文本</Text>
          <Marquee
            showLine={true}
            leftIcon={require('./Icon.png')}
            direction={"vertical"}
            text={["测试标题测试进行中111111111","测试标题测试进行中222222222","测试标题测试进行中333333333"]}
            textFunc={(index)=>this.textpress2(index)}
          />
          <Text>2——正常上下滚动文本（两行显示）</Text>
          <Marquee
            leftIcon={require('./Icon.png')}
            direction={"vertical"}
            showClose={true}
            text={["测试标题测试进行中11111111","测试标题测试进行中222222222",
              "测试标题测试进行中333333333","测试标题测试进行中4444444"]}
            textFunc={(index)=>this.textpress2(index)}
            showLine={true}
            showTwoLine={true}
          />
          <Text>3——自定义上下滚动组件</Text>
          <Marquee
            leftIcon={require('./Icon.png')}
            direction={"vertical"}
            showTwoLine={false}
            scrollComponent={componentArray1}
          />
          <Text>4——自定义上下滚动组件（两行显示）</Text>
          <Marquee
            leftIcon={require('./Icon.png')}
            direction={"vertical"}
            scrollComponent={componentArray2}
            showTwoLine={true}
          />
          
      </View>
    );
  }
}
const styles=StyleSheet.create({
 viewCon: {
    justifyContent:"center",
    height:44
  },
  viewCon2: {
    flexDirection: "row",
    height:22,
    alignItems: "center"
  },
  headText:{
    fontSize: 11,
    color: "#ff7b7b",
    paddingVertical:2,
    paddingHorizontal:3,
    marginRight:5,
    borderColor:"#ff7b7b",
    borderWidth: 1,
    borderRadius: 3,
  },
  info:{
    fontSize:13
  }

})
